<template>
  <view :class="getClass">
    <view class="itemCenter" :style="{ width: styleShow ? 'initial' : '100%' }" v-for="(item, index) in list" :key="index" @tap.stop="fGoTo(`/pages-mall/goods/detail?goodsId=${item.goodsId}`)">
      <!-- 卡片模式 -->
      <view class="cardItem" v-if="styleShow">
        <view class="cardItem-top" :class="samplyStyle ? 'cardItemSamply' : ''">
          <view class="cardItem-top-imgAndPrice">
            <image class="cardItem-top-imgAndPrice-img" mode="aspectFit" :src="fReturnUrl(item.imgUrl)" />
            <view class="cardItem-top-imgAndPrice-price">
              <view class="cas">CAS:</view>
              <view class="cas ellipsis1" style="margin-bottom: 10rpx; color: #333">{{ item.cas }}</view>
              <view class="ellipsis1" v-html="gPrice(item.priceMin, item.unitName, item)" @click.stop="gLogin(item.priceMin, item)"></view>
            </view>
          </view>
          <view class="cardItem-top-title">
            <image class="cardItem-top-title-lg" v-if="![0].includes(item.type)" :src="returnlg(item.type)" />
            <view class="font-size-14 ellipsis1 f_w_600">{{ item.title }}</view>
          </view>
          <view style="height: 40rpx; dispaly: flex" v-if="path == 'pages-mall/sampleMall/goodsList'">
            <view class="free-shipping" v-if="item.isFreeShipping == 1">包邮</view>
            <view class="integral" v-if="item.pointDeductionStatus == 1">可积分抵扣</view>
          </view>
          <view class="flex goods-attr" style="margin: 8rpx 0 0 0; flex-grow: 1">
            <view class="text-2">{{ item.brandName }}</view>
            <template v-if="item.relatedGoodsAttrs && item.relatedGoodsAttrs.length">
              <template v-for="(attr, i) in item.relatedGoodsAttrs">
                <view class="text-3" :key="i" v-if="attr.value">{{ attr.value }}</view>
              </template>
            </template>
          </view>
        </view>
        <view class="cardItem-bot" v-if="showShop" @click.stop="gotoShop(item)">
          <view style="display: flex; align-items: center">
            <image class="store_img" style="width: 32rpx; height: 32rpx; margin-right: 4rpx; flex-shrink: 0" :src="storeLogo(item.storeLogo)" mode="aspectFit"></image>
            <view class="ellipsis1">{{ item.storeName }}</view>
          </view>
          <van-icon name="arrow" color="#888888" size="28rpx" />
        </view>
      </view>
      <!-- 列表模式 -->
      <view class="item" v-else>
        <!-- <slot :item="item"></slot> -->
        <!-- 插入的显示内容，只在活动专区页面使用 -->
        <view class="activity-tag">
          <view class="tagStyle">
            <view class="tag-item" v-if="item.couponGainStatus === 1 && item.couponText" :style="item.couponStyle">
              <x-image src="https://staticcdn.youliao.com/static/image/www_m/goods/icon_activity_coupon.png" width="32rpx" height="26rpx"></x-image>
              <text class="ml-2">{{ item.couponText }}</text>
            </view>
            <view v-if="[1, 2].includes(item.rushPurchaseActivityStatus) && item.activityText" class="tag-item" :style="item.activityStyle">
              {{ item.activityText }}
            </view>
          </view>
        </view>

        <view class="item-con">
          <x-image src="https://staticcdn.youliao.com/static/image/www_pc/goods/goods-coupon-icon.png" mode="widthFix" v-if="item.couponGainStatus == 1" class="couponGainStatus" width="152rpx" height="48rpx" />
          <view :class="minItemShow ? 'minImg' : 'img'">
            <image mode="aspectFit" :src="fReturnUrl(item.imgUrl)" />
          </view>
          <view class="info">
            <view class="two-line-text">
              <image v-if="![0].includes(item.type)" mode="widthFix" :src="returnlg(item.type)" />
              <view class="font-size-14 ellipsis1 f_w_600" style="color: #333333">{{ item.title }}</view>
            </view>
            <!-- <view style="height:52rpx;" v-if="path == 'pages-mall/sampleMall/goodsList'">
                <view class="integral" v-if="item.pointDeductionStatus == 1"></view>
            </view> -->
            <view class="f_s_12 c_grey ellipsis1" :class="minItemShow ? 'minCas' : 'maxCas'">
              <text>CAS：</text>
              <text style="color: #333">{{ item.cas }}</text>
            </view>
            <view class="flex goods-attr" :class="minItemShow ? 'minAttr' : 'maxAttr'">
              <view class="text-2">{{ item.brandName }}</view>
              <template v-if="item.relatedGoodsAttrs && item.relatedGoodsAttrs.length">
                <template v-for="(attr, i) in item.relatedGoodsAttrs">
                  <view class="text-3" :key="i" v-if="attr.value">{{ attr.value }}</view>
                </template>
              </template>
            </view>
            <view v-html="gPrice(item.priceMin, item.unitName, item)" @click.stop="gLogin(item.priceMin, item)"></view>
            <!-- <view v-if="path == 'pages-shop/search/list'" style="margin-top:10rpx" class="f_s_12">
              <span style="color:#666">{{ item.storeName }}</span>
            </view> -->
            <view class="cart" v-if="showCart" @click.stop="getCart(item)">
              <image mode="aspectFit" src="https://staticcdn.youliao.com/static/image/www_m/member/coupon_shoping.png" />
            </view>
          </view>
        </view>
        <view class="item-bot" v-if="showShop" @click.stop="gotoShop(item)">
          <view style="display: flex; align-items: center">
            <image class="store_img" style="width: 32rpx; height: 32rpx; margin-right: 4rpx; flex-shrink: 0" :src="storeLogo(item.storeLogo)" mode="aspectFit"></image>
            <view class="ellipsis1">{{ item.storeName }}</view>
          </view>
          <van-icon name="arrow" color="#888888" size="28rpx" />
        </view>
        <view class="store-vip">
          <image class="vip-icon" :src="item.rightIcon" style="width: 112rpx; height: 28rpx" @tap.stop="toRightsPage" v-if="item.rightIcon" />
          <image :src="item.activityLogo" style="width: 112rpx; height: 28rpx; margin-left: 6rpx" @tap.stop="toRightsPage" v-if="item.activityLogo" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 展示方式 false 为列标模式 true为卡片模式
    styleShow: {
      type: Boolean,
      default: true,
    },
    // 展示列表是否缩小样式
    minItemShow: {
      type: Boolean,
      default: false,
    },
    // 样品商城缩进样式
    samplyStyle: {
      type: Boolean,
      default: false,
    },
    // 展示列表店铺
    showShop: {
      type: Boolean,
      default: true,
    },
    // 展示购物车入口
    showCart: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pageStyleShow: true,
    };
  },
  watch: {
    styleShow(val) {
      this.pageStyleShow = val;
    },
  },
  computed: {
    path() {
      const pages = getCurrentPages();
      let currPage = null;
      if (pages.length) {
        // 获取当前页面的对象（上边所获得的数组中最后一项就是当前页面的对象）
        currPage = pages[pages.length - 1];
      }
      // 获取当前页面的路由
      const route = currPage.route;
      return route;
    },
    ...mapState(["versionFlag"]),
    getClass() {
      if (this.pageStyleShow) {
        return "goodsList itemList";
      }
      return "goodsList";
    },
    storeLogo() {
      return logoUrl => {
        return logoUrl ? this.config_url.imageUrl + logoUrl : "/static/img/storeGoods.png";
      };
    },
  },
  methods: {
    fReturnUrl(str) {
      return str ? this.config_url.imageUrl + str : "https://staticcdn.youliao.com/static/image/www_m/main/default.png";
    },
    returnlg(type) {
      if (type) {
        if (type === 1 && this.versionFlag) return "https://staticcdn.youliao.com/static/image/www_pc/goods/goods_icon/icon-b.png";
        if (type === 2 && this.versionFlag) return "https://staticcdn.youliao.com/static/image/www_pc/goods/goods_icon/icon-d.png";
        if (type === 3 && this.versionFlag) return "https://staticcdn.youliao.com/static/image/www_pc/goods/goods_icon/icon-d.png";
        if (type === 4 && this.versionFlag) return "https://staticcdn.youliao.com/static/image/www_pc/goods/goods_icon/icon-danger.png";
      }
    },
    fReturnLevel(item) {
      const str = [];
      item.relatedGoodsAttrs.forEach(cell => {
        str.push(cell.value);
      });
      return str.join(",");
    },
    gotoShop(item) {
      uni.navigateTo({
        url: `/pages-shop/shopDetailList?id=${item.storeId}`,
      });
    },
    // 添加购物车
    getCart(item) {
      this.$emit("addCart", item);
    },
    // 去有料宝
    toRightsPage() {
      // uni.navigateTo({ url: "/pages-charge/index" });
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
@import "../../static/newCommon.scss";
.itemList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20rpx;
  // background: #FFFFFF;
}
.itemCenter {
  z-index: 20;
}
.goodsList {
  // width: 100%;
  .goods-attr {
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    font-size: 24rpx;
    .text-2 {
      margin-right: 10rpx;
      padding: 0 10rpx;
      background: rgba(36, 45, 74, 0.06);
      color: #9195a4;
      border-radius: 4rpx;
    }
    .text-3 {
      @extend .text-2;

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .integral {
    font-size: 20rpx;
    color: #ffefcc;
    padding: 4rpx 10rpx;
    border-radius: 6rpx;
    display: inline-block;
    margin: 4rpx 0;
    background-image: linear-gradient(#5f523e, #302e2b);
  }
  .free-shipping {
    color: #fff;
    background: #28c09e;
    font-size: 20rpx;
    padding: 4rpx 10rpx;
    border-radius: 6rpx;
    margin-right: 6rpx;
    display: inline-block;
  }
  .item {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    position: relative;
    .cart {
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      right: 22rpx;
      top: 146rpx;
      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .item-con {
      display: flex;
      margin-bottom: 12rpx;
    }
    .img {
      width: 184rpx;
      height: 184rpx;
      border: 1px solid #f3f3f3;
      margin-right: 20rpx;
      flex-shrink: 0;
      image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8rpx;
      }
    }
    .minImg {
      width: 160rpx;
      height: 160rpx;
      border: 1px solid #f3f3f3;
      margin-right: 16rpx;
      flex-shrink: 0;
      image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8rpx;
      }
    }
    .info {
      flex-grow: 1;
      overflow: scroll;
      background-color: #fff;
      border-radius: 0 10rpx 10rpx 0;
      .two-line-text {
        display: flex;
        align-items: center;
        image {
          width: 44px;
          margin-right: 10rpx;
          flex-shrink: 0;
        }
      }
      .self {
        padding: 0 10rpx;
        margin-right: 10rpx;
        border: 2rpx solid #306ef0;
        color: #306ef0;
        border-radius: 6rpx;
      }
      .minCas {
        margin: 4rpx 0 8rpx 0;
      }
      .maxCas {
        margin: 6rpx 0 0rpx 0;
      }
      .minAttr {
        margin: 0 0 8rpx 0;
      }
      .maxAttr {
        margin: 12rpx 0 18rpx 0;
      }
    }
    .item-bot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #8c8c8c;
      font-size: 28rpx;
      padding: 12rpx 0 0 0;
      border-top: 1rpx solid #ececec;
    }
  }
  .cardItem {
    display: flex;
    width: 324rpx;
    border: 1rpx solid #ececec;
    margin-bottom: 24rpx;
    flex-direction: column;
    background: #ffffff;
    .cardItemSamply {
      padding: 16rpx 16rpx 6rpx 16rpx;
    }
    &-top {
      padding: 16rpx;
      flex-grow: 1;
      &-imgAndPrice {
        padding-bottom: 18rpx;
        display: flex;
        &-img {
          width: 108rpx;
          height: 108rpx;
          border: 1rpx solid #ececec;
          margin-right: 16rpx;
          flex-shrink: 0;
          border-radius: 8rpx;
        }
        &-price {
          .cas {
            color: #8c8c8c;
            @extend .font-size-12;
          }
        }
      }
      &-title {
        width: 100%;
        display: flex;
        align-items: center;
        @extend .c-c33;
        &-lg {
          width: 52rpx;
          height: 24rpx;
          margin-right: 10rpx;
        }
      }
    }
    &-bot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #8c8c8c;
      font-size: 24rpx;
      padding: 10rpx 14rpx 16rpx 14rpx;
      border-top: 1rpx solid #ececec;
    }
  }
}

.store-vip {
  margin-left: 38rpx;
}
</style>

<style>
.price_r {
  color: red;
}
.f_s_10_price {
  font-size: 20rpx;
  color: #f0780e;
}
.f_w_600 {
  font-weight: bolder;
}
.f_s_12 {
  font-size: 24rpx;
}

.f_s_16_price {
  font-size: 32rpx;
  color: #f0780e;
}

.activity-tag {
  position: relative;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
}

.tagStyle {
  position: absolute;
  right: -20rpx;
  top: 0;
}
.tag-item {
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  margin-top: 10rpx;
}
.ml-2 {
  margin-left: 4rpx;
}
.tag-item image {
  transform: translateY(2px);
}
.couponGainStatus {
  position: absolute;
  right: 0;
  top: 8px;
}
</style>
